﻿@model ProfileViewModel
@{
    ViewData["Title"] = "我的资料";

}
@section Styles{
    <style>
        .fe-edit-1 {
            cursor: pointer;
        }
    </style>


}
<!-- Start Content-->
<div class="container-fluid">
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">

                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);"><i class="fa fa-map-marker-alt"></i></a></li>
                        <li class="breadcrumb-item"><a href="javascript: void(0);">我的</a></li>
                        <li class="breadcrumb-item active">我的资料</li>
                    </ol>
                </div>
                @*<h4 class="page-title">我的资料</h4>*@
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-12">
            <div class="card-box">
                <div class="col-md-5 col-xl-5 align-middle">
                    <div class="media mb-1">
                        @if (string.IsNullOrEmpty(Model.avatar))
                        {
                            if (Model.Gender == 0)
                            {
                                <img class="d-flex mr-3 img-thumbnail " src="~/assets/images/users/default_female.jpg" alt="Generic placeholder image">
                            }
                            else
                            {
                                <img class="d-flex mr-3 img-thumbnail " src="~/assets/images/users/default_male.jpg" alt="Generic placeholder image">
                            }

                        }
                        else
                        {
                            <img class="d-flex mr-3 img-thumbnail " src="@Model.avatar" alt="Generic placeholder image">
                        }
                        <div class="media-body " id="no_edit_id">
                            <h4>@Model.FullName <i class="fe-edit-1" onclick="showEdit()"></i></h4>
                            @if (User.IsInRole("Teacher"))
                            {
                                <h6 class="text-muted">@Model.Title</h6>
                                <h6 class="text-muted"><i class="mdi mdi-feather"></i> @Model.Signature</h6>
                            }

                            <h6 class="text-muted mt-2"><i class="mdi mdi-cellphone-iphone"></i>@Model.PhoneNumber</h6>
                            <h6 class="text-muted"><i class="mdi mdi-email"></i> @Model.Email</h6>

                        </div>
                        <div class="media-body" style="display:none" id="edit_id">
                            <p class="text-muted"><input type="text" value="@Model.FullName" id="fullname_id" class="form-control" placeholder="请输入全名" /></p>
                            @if (User.IsInRole("Teacher"))
                            {
                                <p> <input type="text" value="@Model.Title" id="title_id" class="form-control" placeholder="请输入职称" /></p>
                                <p>  <input type="text" value="@Model.Signature" id="signature_id" class="form-control" placeholder="请输入签名" /></p>
                            }
                            <p>  <input type="text" value="@Model.PhoneNumber" id="phoneNumber_id" class="form-control" placeholder="请输入手机号码" /></p>
                            <p>  <input type="text" value="@Model.Email" id="email_id" class="form-control" placeholder="请输入邮箱" /></p>
                           
                        </div>
                    </div>
                </div>
                <h5 class="mb-3 mt-4 text-uppercase bg-light p-2"><i class="mdi mdi-account-circle mr-1"></i> 我的资料</h5>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card-box">
                            @if (User.IsInRole("Teacher"))
                            {
                                <div class="form-group mb-3">
                                    <label for="product-summary">自我介绍</label>
                                    <textarea class="form-control" id="product_summary" rows="4" placeholder="" readonly="readonly">@Model.Intro</textarea>
                                </div>
                            }
                            <div class="row">

                                <div class="col-lg-12">

                                    <div class="row">
                                        <div class="col-lg-12">


                                            <div class="form-group mb-3">
                                                <label for="product-summary">地址</label>
                                                <input asp-for="Address" type="text" class="form-control ct-grid-background" readonly="readonly" />
                                            </div>


                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-group mb-3">
                                                <label for="product-summary">生日</label>
                                                <input asp-for="BirthDate" type="date" class="form-control" readonly="readonly"/>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group mb-3">
                                                <label for="product-summary">性别</label>
                                                <select asp-for="Gender" class="form-control" asp-items="Html.GetEnumSelectList<OnlineEducation.Enums.Gender>()" disabled="disabled"></select>
                                            </div>
                                        </div>
                                    </div>
                                    @if (User.IsInRole("Teacher"))
                                    {
                                        <div class="row">
                                            <div class="col-lg-4">
                                                <div class="form-group mb-3">
                                                    <label for="product-summary">QQ</label>
                                                    <input asp-for="QQ" type="text" class="form-control" readonly="readonly"/>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group mb-3">
                                                    <label for="product-summary">微信</label>
                                                    <input asp-for="WeChat" type="text" class="form-control" readonly="readonly"/>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group mb-3">
                                                    <label for="product-summary">微博</label>
                                                    <input asp-for="Weibo" type="text" class="form-control" placeholder="" readonly="readonly"/>
                                                </div>

                                            </div>
                                        </div>

                                    }
                                    </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="row" style="display:none" id="edit_button">
                    <div class="col-lg-6">
                        <div class="row mt-1">
                            <div class="col-6">
                                <div class="text-left">
                                    <button type="button" id="btn_update_profile" class="btn btn-outline-primary waves-effect waves-light" onclick="updateProfile()">更新资料</button>
                                    <button type="button" id="btn_update_profile" class="btn btn-outline-primary waves-effect waves-light" onclick="hideEdit()">取消</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> <!-- end card-box-->
        </div>
    </div>
</div>

@section Scripts{
    @await Html.PartialAsync("_ValidationScriptsPartial")
    <script src="~/assets/libs/moment/moment.min.js"></script>
    <script>
        function showEdit() {
            document.getElementById('edit_id').style.display = "block";
            document.getElementById('no_edit_id').style.display = "none";
            document.getElementById('edit_button').style.display = "block";
            removeReadonly();
        }
        function hideEdit() {
            document.getElementById('edit_id').style.display = "none";
            document.getElementById('no_edit_id').style.display = "block";
            document.getElementById('edit_button').style.display = "none";
            readonlyControl();
        }
        function readonlyControl() {
            $('#product_summary').attr("readonly", "readonly");
            $('#Address').attr("readonly", "readonly");
            $('#BirthDate').attr("readonly", "readonly");
            $('#Gender').attr("disabled", "disabled");
            $('#QQ').attr("readonly", "readonly");
            $('#WeChat').attr("readonly", "readonly");
            $('#Weibo').attr("readonly", "readonly");
        }
        function removeReadonly() {
            $('#product_summary').removeAttr("readonly");
            $('#Address').removeAttr("readonly");
            $('#BirthDate').removeAttr("readonly");
            $('#Gender').removeAttr("disabled");
            $('#QQ').removeAttr("readonly");
            $('#WeChat').removeAttr("readonly");
            $('#Weibo').removeAttr("readonly");
        }
        var profileViewModel = function ProfileViewModel(FullName, Address, BirthDate, EMail, Gender, Intro, PhoneNumber, QQ, Signature, Title, WeChat, Weibo) {
            this.FullName = FullName;
            this.Address = Address;
            this.BirthDate = BirthDate;
            this.EMail = EMail;
            this.Gender = Gender;
            this.Intro = Intro;
            this.PhoneNumber = PhoneNumber;
            this.QQ = QQ;
            this.Signature = Signature;
            this.Title = Title;
            this.WeChat = WeChat;
            this.Weibo = Weibo;
        }
        function updateProfile() {
            var fullName = $('#fullname_id').val();
            var phoneNumber = $('#phoneNumber_id').val();
            var address = $('#Address').val();
            var title = $('#title_id').val();
            var birthDate = $('#BirthDate').val();
            var email = $('#email_id').val();
            var Intro = $('#product_summary').val();
            var QQ = $('#QQ').val();
            var Signature = $('#signature_id').val();
            var WeChat = $('#WeChat').val();
            var Weibo = $('#Weibo').val();
            var gender = $('#Gender').val();
            var data = new profileViewModel(fullName, address, birthDate, email, gender, Intro, phoneNumber, QQ, Signature, title, WeChat, Weibo);
            $.ajax({
                url: '/Profile/UpdateProfile',
                type: 'POST',
                data: data,
                success: function (data) {
                    if (data.success) {
                        ShowMessage(data.message, function () { window.location.reload(); });

                    } else {
                        ShowMessage(data.message);
                    }
                }
            });
        }
    </script>
}